<template>
  <div class="home">
    <WarpperViewList :homelist="datalist" :routename="this.$route.name"/>
    <transition name="scrollX">
      <router-view />
    </transition>
  </div>
</template>

<script>
// @ is an alias to /src

import { debounce } from "lodash-es";
import WarpperViewList from "../../components/WarpperViewList.vue";
export default {
  components: { WarpperViewList },
  name: "HotView",
  data() {
    return {
      datalist: [],
    };
  },
  created() {
    this.getData = debounce(this.getData);
  },
  mounted() {
    this.getData();
  },

  methods: {
    getData() {
      this.$axios
        .get("http://new.puncheers.com/api/v2/home/list?page=1&limit=4&type=20")
        .then(({ data }) => {
          this.datalist = data.data;
          // console.log(this.datalist);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.scrollX-enter,
.scrollX-leave-to {
  left: 0;
  top: 0;
  right: 0;
  position: absolute;
  transform: translateY(100%);
   opacity: 0;
}
.scrollX-enter-active {
  transition: all 0.7s ease;
}
.scrollX-leave{
  transform: translateY(-100%);
   opacity: 1;
}
.scrollX-enter-to {
 transform: translateY(0);
  opacity: 1;
}
.scrollX-leave-active {
  transition: all 0.7s ease;
  
  z-index: 100;
}
</style>
